<template>
	<view class="container">
		<!-- 只需要绑定购物车位置即可 -->
		<flyInCart ref="inCart" :cartBasketRect="cartBasketRect"></flyInCart>
		<view class="ikz-top-bg">
			<image class="ikz-top-bg-img" :src="service_img"></image>
		</view>
		<view class="title_txt">

			<view class="shouhuo" @click="goaddress">
				<image src="/static/mai/shdz.png" style="width: 28rpx;height: 28rpx;" mode=""></image>
			</view>

		</view>

		<view class="shangbox">
			<view class="leftbox">
				<view class="top-box">
					{{storeData.name}}
				</view>
				<view class="bombox">
					<view class="yuexuao">
						月销 {{storeData.sale_count}}
					</view>
					<view class="times">
						营业时间：{{storeData.business_hours_start_times}}-{{storeData.business_hours_end_times}}
					</view>
				</view>
			</view>
			<image :src="adminImgPath+storeData.logo_image"
				style="width: 160rpx;height: 160rpx;border-radius: 20rpx;position: relative;top: -60rpx;" mode="">
			</image>
		</view>
		<view class="" style="width: 100%;height: 22rpx;background-color: #f5f5f5;">

		</view>
		<view class="main" :style="{height: mainHeight}">
			<!-- <view class="" :style="{display:showZz}" style="position: absolute;top: 0;bottom: 0;left: 0;width: 100%; background: #3F536E;z-index: 999;opacity: 0.5;">
				遮罩 
			</view> -->
			<view class="tabs-box" :style="{'background-color':'rgba(245,245,245,'+ navSearchBgOpacity +')'}">
				<view style="height: 100%;">
					<view class="hx-tabs">
						<view class="hx-tabs-item" v-for="(item,i) in tabs" :key="i"
							:class="{'hx-tabs-active': swiperCurrent == i}" @click="swiperChange(i)"
							:style="{transition: transtionTime + 'ms'}">
							<text>{{item.name}}</text>
						</view>
					</view>
				</view>
			</view>
			<swiper id="mainSwiper" style="height: 100%;" :current="swiperCurrent" :duration="transtionTime"
				@transition="transition" @animationfinish="animationfinish">
				<!-- 购物 -->
				<swiper-item class="swiper-item">
					<view class="scroll-items">
						<view class="category-list">
							<!-- 左侧分类导航 -->
							<scroll-view :scroll-top="menuScrollTop" :scroll-y="goodsBoxScroll" class="left">
								<view v-for="item in categoryList" :key="item.id" class="row"
									:class="{active: item.id == menuCurrentId}" @click="showCategory(item)">
									<view class="text">
										{{item.name}}
									</view>
									<view class="row-number" v-if="item.number">
										{{item.number}}
									</view>
								</view>
							</scroll-view>
							<!-- 右侧子导航 -->
							<scroll-view scroll-with-animation :scroll-y="goodsBoxScroll" class="right"
								@scroll="asideScroll" :scroll-top="tabScrollTop">
								<view class="goodsListBox">
									<view class="category" v-for="item in categoryList" :key="item.id"
										:id="'goodsBox'+item.id">
										<!-- <view class="s-item">{{item.name}}</view> -->
										<view class="list">
											<view class="box" v-for="(rowData,i) in goodsList" :key="rowData.id"
												v-if="item.id == rowData.category_id">
												<!-- 商品列表 -->
												<!-- <m-store-pro @touchOnGoods="touchOnGoods" :rowData="box"></m-store-pro>
													 -->
												<!-- 商品列表 -->
												<view class="m-store-item" @click="hrefGoodsInfo(rowData,i)">
													<view class="m-img">
														<image style="width: 100%;height: 100%;"
															:src="adminImgPath+rowData.image" mode="aspectFit"></image>
													</view>
													<view class="m-text">
														<view class="m-title">
															{{rowData.name}}
														</view>
														<view class="m-descripe">
															{{rowData.introduction}}
														</view>
														<view class="m-bottom">
															<block v-if="rowData.form">
																<view class="m-price-box">
																	<view class="symbol">￥</view>
																	<view class="m-price">
																		{{rowData.form_child[0].price}}
																	</view>
																	<view class="m-old-price"
																		v-if="rowData.form_child[0].oldprice">
																		<text>￥{{rowData.form_child[0].oldprice}}</text>
																	</view>
																</view>
															</block>
															<block v-else>
																<view class="m-price-box">
																	<view class="symbol">￥</view>
																	<view class="m-price">{{rowData.price}}</view>
																	<view class="m-old-price" v-if="rowData.oldprice">
																		<text>￥{{rowData.oldprice}}</text>
																	</view>
																</view>
															</block>
															<view class="m-distance" @click.stop>
																<block v-if="rowData.form">
																	<view class="miniBtn" @click="showForm(rowData)">
																		<text>选规格</text>
																		<!-- #ifdef APP-PLUS || H5 -->
																		<view class="num"
																			v-if="getCartGoodsNum(rowData)">
																			{{getCartGoodsNum(rowData)}}
																		</view>
																		<!-- #endif -->
																	</view>
																</block>
																<block v-else>
																	<view :class="'addEle_' + i" class="jumpPosition">
																	</view>
																	<view class="numbox"
																		style="display: flex;align-items: center;justify-content: space-between;">
																		<view class="numbox-minus"
																			@click="calcValue('minus',rowData,'.addEle_' + i)"
																			v-if="rowData.number>0">
																			<image style="width: 28rpx;height: 28rpx;"
																				src="/static/mai/details-jian.png"
																				mode="aspectFit"></image>
																		</view>
																		<view class="numbox-value"
																			v-if="rowData.number>0">{{rowData.number}}
																		</view>
																		<view class="numbox-plus"
																			@click="calcValue('plus',rowData,'.addEle_' + i)">
																			<image style="width: 28rpx;height: 28rpx;"
																				src="/static/mai/details-jia.png"
																				mode="aspectFit"></image>
																		</view>
																	</view>
																</block>
																<!-- <image @click="touchOnAddGoods('.addEle_' + i,rowData)" style="width:20px;height: 20px;" src="../../static/img/icon/shop_icon_buy.png" mode="aspectFit"></image>
																 -->
															</view>
														</view>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
					</view>
				</swiper-item>
				<!-- 商家 -->
				<swiper-item class="swiper-item">
					<scroll-view :scroll-top="menuScrollTop" :scroll-y="goodsBoxScroll"
						class="scroll-items business-box" style="height: 100%;">
						<view class="info-list">
							<view class="info-list-container" style="display: flex;align-items: center;">

								<!-- <text style="margin-left: 14rpx;flex:1;">{{ storeData.address }}</text> -->
								<text style="margin-left: 14rpx;flex:1;">商家电话：{{ storeData.address }}</text>

								<image style="height:43rpx" src="/static/supermarket/index/phone-icon.png"
									@click="toTel()" mode="heightFix">
								</image>
							</view>
						</view>
						<view class="info-list">
							<scroll-view scroll-x class="scroll-img">
								<image class="column" :src="item" mode="aspectFill"
									v-for="(item,index) in storeData.environment_images" :key="index"
									@click="toimgdetails"></image>
							</scroll-view>
						</view>
						<view class="info-lists">
							<view class="leftbox">
								店铺介绍
							</view>
							<view class="rightbox">
								{{storeData.introduction}}
							</view>
						</view>
						<view class="info-lists" @click="tozizi">
							<view class="leftbox">
								店铺资质
							</view>
							<image src="/static/mai/lun.png" style="width: 210rpx;height: 166rpx;" mode=""></image>
						</view>
						<view class="info-list" style="margin-bottom: 27rpx;padding-top: 0;">
							<view class="info-list-container" style="display: flex;align-items: center;">
								<mp-html :content="storeData.content" />
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 购物车 -->
		<view class="foot" @touchmove.stop.prevent="mpClear" :style="{height: footHeight}" v-if="showFoot">
			<view class="zz" @click="hideShoppingCar"></view>
			<view class="btn-box">
				<view class="btn-box-left" @click="showShoppingCar">
					<view class="cart" :animation="cartAnimationData">
						<view class="tag cartNum" v-if="goodsTotalNumber>0">{{goodsTotalNumber}}</view>
						<image id="cart" src="/static/mai/che.png" mode="aspectFit">
						</image>
					</view>
					<view class="priceBox">
						<view class="hx-txt-18 hx-color-red">
							￥{{goodsTotalPrice||'0.00'}}
						</view>
					</view>
				</view>
				<view class="btn-box-right">
					<!-- <view class="jiesuan" v-if="goodsTotalPrice>0 && goodsTotalPrice >= 15" @click="jiesuan"> -->
					<view class="jiesuan" @click="jiesuan">
						去结算
					</view>
					<!-- <view class="pscj hx-txt-10 hx-color-gray" v-else>
						<text v-if="15>0">差￥{{-(goodsTotalPrice-15)}}起送</text>
					</view> -->
				</view>
			</view>

			<view class="order-box" :style="{display: showorder ? 'flex' : 'none'}">
				<view class="" style="height: 120rpx;display: flex;align-items: center;">
					<view class="tab-item" v-for="(item,index) in kemulist" :key="index" @click="kemuhah(item,index)">
						<view :class="['tab-item', { selected: selectedIndiceskkemu == index ? 'selected':''}]">
							{{ item.name }}
						</view>
					</view>
				</view>

				<view class="dizhibox">
					<view v-if="!address_default">请选择收货地点</view>
					<view class="ikz-form-address" v-else @click="goaddresspage">
						<view class="topbbb">
							<image src="/static/index/address.png" style="width: 38rpx;height: 38rpx;" mode=""></image>
							{{address_default.name}}-{{address_default.mobile}}
						</view>
						<view class="ikz-form-address-detail">
							{{address_default.group_name}}-{{address_default.detail}}
						</view>
					</view>

					<view class="qiwang">
						<view class="qiwangtxt">
							期望送达
						</view>
						<view style="width: 40%;">
							<ikz-datetime @returnTime="returnTime"></ikz-datetime>
						</view>
					</view>

					
				</view>
				<view class="shangpinbox">
					<text>共下单5件</text>
					<view class="itembox">
						<image src="/static/mai/mian.png" style="width: 160rpx;height: 160rpx;" mode=""></image>
						<view class="ribox">
							<view class="toptxt">
								伯牙绝弦
							</view>
							<view class="moneybox">
								
							</view>
						</view>
					</view>
				</view>

			</view>
			<view class="cart-box" :style="{display: showCar ? 'flex' : 'none'}">
				<view class="box-container operating-box">
					<view class="operating-box_right">

					</view>
					<view class="operating-box_left clear" @click="clearShoppingCart">
						<i class="hxicon-delete"></i>
						<text>清空购物车</text>
					</view>
				</view>
				<view class="goods-box">
					<view class="" style="flex: 1;">
						<scroll-view scroll-y="true" class="goods-list-scroll" :scroll-top="carGoodsScrollTop">
							<view class="goods-list">
								<view class="box" v-for="(rowData,i) in shoppCart" :key="rowData.id"
									v-if="rowData.number>0">
									<view class="m-store-item">
										<view class="m-img">
											<image style="width: 100%;height: 100%;" :src="adminImgPath+rowData.image"
												mode="aspectFit"></image>
										</view>
										<view class="m-text">
											<view class="m-title">
												{{rowData.name}}
											</view>
											<view class="m-descripe">

												{{rowData.current_form ? rowData.form.name + "：" + rowData.current_form.name : rowData.introduction}}
											</view>
											<view class="m-bottom">
												<view class="m-price-box">
													<view class="symbol">￥</view>
													<view class="m-price">{{rowData.price}}</view>
													<view class="m-old-price" v-if="rowData.oldprice">
														<text>￥{{rowData.oldprice}}</text>
													</view>
												</view>
												<view class="m-distance">
													<view :class="'addEle2_' + rowData.id" class="jumpPosition">
													</view>
													<view class="numbox"
														style="display: flex;align-items: center;justify-content: space-between;">
														<view class="numbox-minus"
															@click="calcValue('minus',rowData,'.addEle2_' + rowData.id)"
															v-if="rowData.number>0">
															<image src="/static/mai/details-jian.png"
																style="width: 28rpx;height: 28rpx;" mode="aspectFit">
															</image>
														</view>
														<view class="numbox-value" v-if="rowData.number>0">
															{{rowData.number}}
														</view>
														<view class="numbox-plus"
															@click="calcValue('plus',rowData,'.addEle2_' + rowData.id)">
															<image src="/static/mai/details-jia.png"
																style="width: 28rpx;height: 28rpx;" mode="aspectFit">
															</image>
														</view>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var statusBarHeight = uni.getSystemInfoSync( ).statusBarHeight;
	import flyInCart from '@/pages/Component/supermarket/component/flyInCart.vue'
	import mpHtml from '@/pages/Component/Public/mp-html/components/mp-html/mp-html.vue';
	import ikzDatetime from '@/pages/Component/Public/Pickertime/public/datetime/index.vue';
	import ikz from '@/pages/Common/tools.js';
	var app = getApp( );
	export default {
		components: {
			flyInCart,
			mpHtml,
			ikzDatetime
		},
		data( ) {
			return {
				form_data: {
					type: 1,
					game_platform_name: '', //平台名称
					game_platform: '', //游戏平台
					game_time: '1小时', //游戏时间
					receive_limit: '不限性别', //游戏接单限制
					lease_duration: '1小时归还', //租借时长
					down_url: '', //下载链接
					receive_email: '', //收件邮箱
					start: '',
					destination: '',
					hope_arrive: '',
					information: '',
					price: '',
					remarks: '',
					reward: '',
					total_fee: 0,
					annex_information_images: [ ],
					express_temp: [ ]
				},
				service_img: '/static/mai/detailsmain.png',
				id: 0,
				adminImgPath: getApp( ).globalData.adminImgPath,
				loading_css: {
					display: 'flex',
				},
				pageScroll: {},
				kemulist: [ {
						name: '外卖配送'
					},
					{
						name: '门店自取'
					},
				],
				//商家信息
				storeData: [ ],
				//商品列表
				goodsList: [ ],
				// 是否限购
				is_quota: '',
				// 限购数量
				quota_number: '',
				//商品分类信息列表
				categoryList: [ ],
				//评论列表
				commentList: [ ],
				// 商品详情
				goodsDetails: "",
				navSearchWidth: 3,
				navSearchBgOpacity: 0,
				navSearchColor: '#ffffff',
				navHeadHeight: 44,
				//默认禁止商品栏滚动
				goodsBoxScroll: true,
				selectedIndiceskkemu: 0,
				statusBarHeight,
				//动画时间
				animaTime: 300,
				//商家盒子高度
				storeInfoBoxHeight: 100,
				//展开门店信息容器
				showStoreBox: false,

				num: 1,
				element: [ ],
				cartAnimation: {},
				cartAnimationData: {},

				//tabs
				tabs: [ {
						name: '购物'
					},
					{
						name: '商家'
					},
				],
				swiperCurrent: 0,
				dx: 0,
				swiperCurrentSliderLeft: 0,
				transtionTime: 100,

				//所有购物车
				//显示购物车
				showFoot: true,

				//配送费
				shippingDees: 0,
				//配送起步价
				startingPrice: 0,

				//购物车商品价格合计
				goodsTotalPrice: 0,
				//购物车商品数量合计
				goodsTotalNumber: 0,
				//当前门店购物车
				shoppCart: [ ],
				//foot 高度
				footHeight: '0',
				//显示购物车
				showCar: false,
				showorder: false,
				//购物车中商品滚动条位置
				carGoodsScrollTop: 0,
				//购物车缓存 Storage 名称
				shoppingCartStorageName: 'shopping_cart',

				sizeCalcState: false,
				tabScrollTop: 0,

				mainHeight: 0,
				menuCurrentId: 0,


				//购物车显示折扣
				showDiscount: true,
				//手指触摸滑动
				touchData: {},
				//页面滚动条距离顶部的距离
				pageScrollTop: 0,

				menuScrollTop: 0,

				//多规格当前产品
				currentGoodsData: {},
				//显示规格容器
				showFormBox: false,
				//显示规格动画
				formAnimationData: {},

				//购物车位置数据
				cartBasketRect: {},

				navStatus: true,
				isBack: true,
				number: 0,
				address_default: '',
			};
		},
		async onLoad( option ) {
			if ( !option ) {
				return
			}
			const that = this
			this.id = option.id
		},
		onShareAppMessage( ) {
			return {
				title: app.globalData.share_info.share_title,
				path: '/pages/Component/supermarket/Program/store/index?id=' + this.id,
				imageUrl: app.globalData.share_info.share_img,
			}
		},
		onReady( ) {
			const that = this
			let sysInfo = uni.getSystemInfoSync( );
			//屏幕高度 - 头部导航高度 - 状态栏高度 - 分页高度
			this.mainHeight = sysInfo.screenHeight - 43 - 195 - statusBarHeight - 40 + 'px';
		},
		onBackPress( event ) {
			if ( this.showFormBox ) {
				this.hiddenForm( )
				return true
			}
			if ( !this.isBack ) {
				this.$refs.popup.close( )
				return true
			}
		},
		onShow( ) {
			this.address_default = app.globalData.user_address.address_default;
			this.form_data.destination = this.address_default.id;
			this.getStoreDet( )
			this.getGoodsList( )
		},
		watch: {
			showStoreBox( val, oldVal ) {
				if ( val == true ) {

					this.showStoreBoxFunc( );
				} else {
					this.hiddenStoreBoxFunc( );
				}
			}
		},
		onPageScroll( e ) {
			let that = this
			let top = e.scrollTop
			that.pageScrollTop = e.scrollTop
			that.pageScroll = e

			if ( top < 120 ) {
				if ( that.navSearchWidth >= 3 ) {
					if ( top < 3 ) {
						that.navSearchWidth = 3
						that.navSearchBgOpacity = 0
						that.navSearchColor = '#ffffff'
					} else {
						let n = top * ( 120 / 100 )
						if ( n > 100 ) {
							n = 100
						}
						that.navSearchWidth = n
						//that.navSearchBgOpacity =1
						that.navSearchBgOpacity = top * ( 1 / 100 )
						that.navSearchColor = '#888888'
					}
				}
			} else {
				that.navSearchWidth = 100
				that.navSearchBgOpacity = 1
				that.navSearchColor = '#888888'
			}

			let view = uni.createSelectorQuery( ).select( ".main" );
			view.fields( {
				rect: true
			}, data => {
				if ( data != null ) {
					if ( data.top <= statusBarHeight + 44 ) {
						that.goodsBoxScroll = true
					} else {
						that.goodsBoxScroll = true
					}
				}

			} ).exec( );
		},
		methods: {
			hopeArrivePickerChange( e ) {
				this.form_data.hope_arrive = e.detail.value;
			},
			//返回时间
			returnTime( e ) {
				console.log( "父页面接收的时间", e );
				this.form_data.hope_arrive = e
				console.log( "父页面hope_arrive", this.form_data.hope_arrive );
			},
			//我的地址
			goaddresspage( ) {
				uni.navigateTo( {
					url: '/pages/Component/Module/Address/Program/myAddress/index'
				} )
			},
			goaddress( ) {
				uni.navigateBack( {
					data: 1
				} )
			},
			tozizi( ) {
				uni.navigateTo( {
					url: '/pages/Component/Module/takeaway/apply/ziziimg/ziziimg'
				} )
			},
			toimgdetails( ) {
				uni.navigateTo( {
					url: '/pages/Component/Module/takeaway/apply/imgdetails/imgdetails?id=' + this.id
				} )
			},
			// 获取商家详情
			getStoreDet( ) {
				var path = '/xyb/supermarket/index/business_detail';
				var data = {
					id: this.id
				};
				ikz.requestPost( path, data, res => {
					console.log( "获取商家详情", res )
					if ( res.data.code ) {
						//商家信息
						this.storeData = res.data.data
						this.storeData.store_id = this.id
						this.categoryList = res.data.data.goods_category
						console.log( this.categoryList, '0000' );
						if ( this.categoryList.length ) {
							this.menuCurrentId = this.categoryList[ 0 ].id;
						}
					} else {
						uni.showModal( {
							title: '提示',
							content: res.data.msg,
							showCancel: false,
							success: function( res ) {}
						} );
					}
				} )
			},
			// 获取商品列表
			getGoodsList( ) {
				var path = '/xyb/supermarket/index/all_goods';
				var data = {
					business_id: this.id
				};
				ikz.request( path, data, res => {
					console.log( "获取商品列表", res )
					this.showLoading = false
					uni.hideLoading( )
					if ( res.data.code ) {
						this.goodsList = res.data.data.data
						for ( let i in this.goodsList ) {
							this.goodsList[ i ].number = 0
						}
						let q = uni.createSelectorQuery( )
						setTimeout( ( ) => {
							this.calcSize( )
							q.select( '#cart' ).boundingClientRect( data => {
								this.cartBasketRect = data
							} ).exec( );
							this.init( );
						}, 100 )
					} else {
						uni.showModal( {
							title: '提示',
							content: res.data.msg,
							showCancel: false,
							success: function( res ) {}
						} );
					}
					this.loading_css.display = 'none';
				} )
			},
			// 拨打电话
			toTel( ) {
				uni.makePhoneCall( {
					phoneNumber: this.storeData.phone
				} )
			},
			init( ) {
				let that = this;
				let goods = that.goodsList;
				//商品初始化
				// for(let i in goods){
				// 	goods[i].purchases = 3
				// }
				that.shoppCart = [ ]
				let carts = uni.getStorageSync( that.shoppingCartStorageName ) || [ ];
				//根据缓存数据 获取购物车中属于本商店的商品
				for ( let i in carts ) {
					if ( carts[ i ].store_id == that.storeData.store_id ) {
						that.shoppCart = carts[ i ].shopping_cart ? carts[ i ].shopping_cart : [ ];
						break;
					}
				}
				that.goodsTotalPrice = 0;
				that.goodsTotalNumber = 0;
				for ( let i in that.shoppCart ) {
					for ( let j in goods ) {
						if ( goods[ j ].id == that.shoppCart[ i ].id ) {
							goods[ j ].number = that.shoppCart[ i ].number
						}
					}
					//计算商品总价
					that.goodsTotalPrice += that.shoppCart[ i ].total
					//商品总数量
					that.goodsTotalNumber += that.shoppCart[ i ].number
				}
				that.goodsTotalPrice = Number( that.goodsTotalPrice ).toFixed( 2 )
				//初始化商品列表
				that.goodsList = goods;

				//初始化起步价和配送费
				that.starting_price = that.storeData.starting_price;
				that.shipping_dees = that.storeData.shipping_dees;

				that.setLabelNumber( );
			},
			navBack( ) {
				if ( getCurrentPages( ).length > 1 ) {
					uni.navigateBack( );
				} else {
					// #ifdef H5
					history.back( )
					// #endif
					// #ifndef H5
					uni.reLaunch( {
						url: '/pages/index/index'
					} );
					// #endif
				}
			},
			popupChange( e ) {
				this.isBack = !e.show
			},
			//显示 规格
			showForm( goods ) {
				var that = this;
				let goodsCart = that.getStoreCart( );

				if ( goodsCart ) {
					let currentGoods = null
					for ( let i in goodsCart ) {
						if ( goodsCart[ i ].id == goods.id ) {
							currentGoods = goodsCart[ i ]
							break
						}
					}
					if ( currentGoods ) {
						let selectStatus = false
						for ( let i in goods.form_child ) {
							if ( goods.form_child[ i ].id == currentGoods.current_form.id ) {
								if ( !selectStatus ) {
									goods.form_child[ i ].select = true
									goods.number = currentGoods.number
									selectStatus = true
								} else {
									goods.form_child[ i ].select = false
								}
							} else {
								goods.form_child[ i ].select = false
							}
						}
					}

				}
				that.currentGoodsData = goods
				that.$refs.popup.open( )
			},
			//隐藏规格
			hiddenForm( ) {
				this.$refs.popup.close( );
			},
			formFirstAddGoods( ) {
				let that = this
				that.formAddGoodsChange( 1, that.currentGoodsData )
				that.touchOnAddGoods( '#ggAddBtn', that.currentGoodsData )
			},
			//加入购物车
			formAddGoodsChange( number, goodsData ) {
				let that = this;
				if ( number >= 1 ) {
					for ( let i in goodsData.form_child ) {
						if ( goodsData.form_child[ i ].select == true ) {
							that.currentGoodsData.current_form = goodsData.form_child[ i ]
							break
						}
					}
				}
				that.addGoodsChange( number, that.currentGoodsData )
			},
			//选择规格
			selectGoodsForm( goods, formChild ) {
				let that = this
				let data = goods.form_child
				let n = 0
				for ( var i in data ) {
					if ( data[ i ].id == formChild.id ) {
						data[ i ].select = true
					} else {
						data[ i ].select = false
					}
				}
				let goodsCart = that.getStoreCart( );
				if ( goodsCart ) {
					for ( let i in goodsCart ) {
						if ( goodsCart[ i ].id == goods.id && goodsCart[ i ].current_form.id == formChild.id ) {
							n = goodsCart[ i ].number
							break;
						}
					}
				}

				goods.number = n
				this.currentGoodsData = goods
			},
			//获取该商品在购物车的数量
			getCartGoodsNum( goods ) {
				let cart = this.getStoreCart( )
				let n = 0
				if ( cart ) {
					for ( let i in cart ) {
						if ( cart[ i ].id == goods.id ) {
							n += cart[ i ].number
						}
					}
				}
				return n
			},
			//获取门店购物车
			getStoreCart( ) {
				const that = this
				return that.shoppCart
			},
			swiperChange( index ) {
				this.swiperCurrent = index;
				this.swiperCurrentSliderLeft = 70 * index;
			},
			transition( {
				detail: {
					dx
				}
			} ) {
				// this.$refs.tabs.setDx(dx);
			},
			animationfinish( {
				detail: {
					current
				}
			} ) {
				/* this.$refs.tabs.setFinishCurrent(current); */
				this.swiperCurrent = current;
				this.current = current;
				this.swiperChange( current );
				this.showFoot = current == 0 && this.showStoreBox != true ? true : false;

			},
			//一级分类点击
			showCategory( item ) {
				const that = this
				that.isBoxScroll = true;
				that.menuCurrentId = item.id;
				setTimeout( ( ) => {
					let index = that.categoryList.findIndex( sitem => sitem.id === item.id );
					that.tabScrollTop = that.categoryList[ index ].top;
					that.isBoxScroll = false
				}, 100 )
			},
			//右侧栏滚动
			asideScroll( e ) {
				const that = this;
				const scrollTop = Math.round( e.detail.scrollTop );
				that.calcSize( )
				const tabs = that.categoryList.filter( item => item.top <= scrollTop ).reverse( );

				if ( tabs.length > 0 ) {
					that.menuCurrentId = tabs[ 0 ].id;
				}
				const menuNum = that.categoryList.length
				const cNum = tabs.length
				// 定位在第4个分类，当分类滑动到第4格时将不再变换位置。
				const n = 4
				if ( cNum > n ) {
					that.menuScrollTop = ( cNum - n ) * 45
				} else {
					that.menuScrollTop = 0
				}
			},
			//计算右侧栏每个tab的高度等信息
			calcSize( event ) {
				let h = 0;
				// if(this.sizeCalcState){
				// 	return false
				// }
				this.categoryList.forEach( item => {
					let view = uni.createSelectorQuery( ).select( "#goodsBox" + item.id );
					view.fields( {
						size: true
					}, data => {
						if ( data != null ) {
							item.top = h;
							h += Math.round( data.height );
							item.bottom = h;
						}

					} ).exec( );
				} )
				this.sizeCalcState = true;
			},
			//小球跳跃动画
			touchOnAddGoods( ele, data ) {
				const that = this;
				let q = uni.createSelectorQuery( )
				q.select( ele ).boundingClientRect( res => {
					that.$refs.inCart.addToCart( res, data.id );
				} ).exec( );

			},
			// 增减按钮
			calcValue( type, datas, ele ) {
				console.log( "传过来的值是", datas );
				if ( type == "minus" ) {
					this.addGoodsChange( --datas.number, datas )
				} else {
					// is_quota = 1 为限购
					if ( datas.is_quota == 1 && datas.quota_number == datas.number ) {
						uni.showToast( {
							title: "商品已达到最大购买量",
							icon: "none"
						} )
						return
					}
					this.addGoodsChange( ++datas.number, datas )
					this.touchOnAddGoods( ele, datas )
				}
			},
			//新增商品计算价格
			addGoodsChange( number, rowData ) {
				number = Number( number )
				var that = this;
				let shoppCart = [ ];
				let totalPrice = 0;
				let totalNumber = 0;
				let existedGoods = false;
				//门店第一次添加商品
				let isFirstAddGoods = true;
				//是否为有规格的商品
				let isFormGoods = false
				if ( rowData.current_form ) {
					isFormGoods = true
				}
				let deleteGoods = null
				let carts = uni.getStorageSync( that.shoppingCartStorageName ) || [ ];
				if ( carts.length != 0 ) {
					//根据缓存数据 获取购物车中属于本商店的商品
					for ( let i in carts ) {
						if ( carts[ i ].store_id == that.storeData.store_id ) {
							shoppCart = carts[ i ].shopping_cart ? carts[ i ].shopping_cart : [ ];
							isFirstAddGoods = false
							break;
						}
					}
					//检查该商品是否为第一次添加，
					for ( var i in shoppCart ) {
						// if(shoppCart[i].id == rowData.id){
						// 	// 是多规格商品
						// 	if(isFormGoods){
						// 		//规格相同
						// 		if(shoppCart[i].current_form.id == rowData.current_form.id){
						// 			//数量为0，在购物车中移除该商品
						// 			if(number <= 0){
						// 				deleteGoods = shoppCart[i];
						// 				break;
						// 			}else{
						// 				// 直接修改商品数量，并计算出单品合计
						// 				shoppCart[i].price = rowData.current_form.price
						// 				shoppCart[i].oldprice = rowData.current_form.oldprice
						// 				shoppCart[i].total = number *  rowData.current_form.price
						// 			}

						// 		}
						// 	}else{
						// 		// 不是多规格商品
						// 	}
						// }

						if ( shoppCart[ i ].id == rowData.id ) {
							if ( isFormGoods ) {
								//相同商品比较规格是否也相同
								if ( shoppCart[ i ].current_form.id == rowData.current_form.id ) {
									existedGoods = true;
								}
							} else {
								existedGoods = true;
							}
							if ( existedGoods ) {
								//在购物车中移除该商品
								if ( number <= 0 ) {
									deleteGoods = shoppCart[ i ];
									break;
								}
								//非第一次添加，直接修改商品数量，并计算出单品合计
								if ( isFormGoods ) {
									shoppCart[ i ].price = rowData.current_form.price
									shoppCart[ i ].oldprice = rowData.current_form.oldprice
									shoppCart[ i ].total = number * rowData.current_form.price
								} else {
									shoppCart[ i ].price = rowData.price
									shoppCart[ i ].total = number * rowData.price
									shoppCart[ i ].oldprice = rowData.oldprice
								}
								shoppCart[ i ].number = rowData.number = number
								break;
							}
						}
					}
				}
				//在购物车中移除该商品
				if ( deleteGoods != null ) {
					if ( carts ) {
						//根据缓存数据 获取购物车中属于本商店的商品
						for ( let i in carts ) {
							if ( carts[ i ].store_id == that.storeData.store_id ) {
								var index = shoppCart.indexOf( deleteGoods );

								if ( index > -1 ) {
									shoppCart.splice( index, 1 );
								}
								carts[ i ].shopping_cart = shoppCart
								uni.setStorageSync( that.shoppingCartStorageName, carts );
								break;
							}
						}
						setTimeout( ( ) => {
							this.init( );
						}, 100 )
					} else {
						that.storeData.shopping_cart = [ ]
						uni.setStorageSync( that.shoppingCartStorageName, that.storeData );
					}
				}

				//第一次添加
				if ( !existedGoods ) {
					if ( rowData.form ) {
						rowData.price = rowData.current_form.price
						rowData.oldprice = rowData.current_form.oldprice
						rowData.total = number * rowData.current_form.price
					} else {
						rowData.total = number * rowData.price
					}
					rowData.number = number;
					shoppCart.push( rowData );
				}

				//计算总商品数量和总价
				for ( var i in shoppCart ) {
					//总价
					totalPrice += shoppCart[ i ].total
					totalNumber += shoppCart[ i ].number
				}
				//更改商品列表中的已购买数量
				for ( let i in that.goodsList ) {
					if ( that.goodsList[ i ].id == rowData.id ) {
						that.goodsList[ i ] = rowData
						break;
					}
				}

				that.goodsTotalPrice = Number( totalPrice ).toFixed( 2 )
				that.goodsTotalNumber = totalNumber

				that.shoppCart = shoppCart;
				that.storeData.shopping_cart = shoppCart;

				that.setLabelNumber( );
				if ( isFirstAddGoods ) {
					carts.push( that.storeData )
				}
				if ( that.goodsTotalNumber == 0 ) {
					that.hideShoppingCar( );
				}
				for ( let i in carts ) {
					if ( !carts[ i ].shopping_cart.length ) {
						carts.splice( i, 1 )
					}
				}
				//购物车商品数据缓存至本地
				uni.setStorageSync( that.shoppingCartStorageName, carts );
			},
			//计算每类商品购买的总数
			setLabelNumber( ) {
				let that = this;
				//计算每一类购买商品的总数量
				for ( let j in that.categoryList ) {
					let n = 0;
					for ( var i in that.shoppCart ) {
						if ( that.shoppCart[ i ].category_id == that.categoryList[ j ].id ) {
							n += that.shoppCart[ i ].number;
						}
					}
					that.categoryList[ j ].number = n;
				}
			},
			//去结算
			jiesuan( ) {
				if ( !uni.getStorageSync( "user_info" ) ) {
					uni.navigateTo( {
						url: "/pages/login/index"
					} )
					return
				}
				// if(!getApp().globalData.mobile) {
				// 	uni.navigateTo({
				// 		url: "/pages/login/index"
				// 	})
				// 	return
				// }


				// this.navTo( "/pages/Component/supermarket/Program/store/order?id=" + this.id )
				// this.footHeight = '100%';
				// this.carGoodsScrollTop = 0;
				this.showCar = false
				this.showorder = true

			},
			navTo( url ) {
				let that = this;
				if ( that.navStatus ) {
					that.navStatus = false
					uni.navigateTo( {
						url: url,
						complete: function( ) {
							that.navStatus = true
						}
					} )
				}
			},
			//联系商家
			contact( ) {
				uni.showModal( {
					title: "",
					content: "联系商家"
				} )
			},
			showStoreBoxFunc( ) {
				this.storeInfoBoxHeight = uni.getSystemInfoSync( ).screenHeight - 136;
				this.$set( this.$data, 'showFoot', false );
				this.showStoreBox = true;
				uni.pageScrollTo( {
					duration: 0,
					scrollTop: 0
				} )
			},
			hiddenStoreBoxFunc( ) {
				this.storeInfoBoxHeight = 100;
				this.showStoreBox = false;
				if ( this.swiperCurrent == 0 ) {
					this.$set( this.$data, 'showFoot', true );
				}
			},
			mpClear( e ) {
				// TODO nvue 取消冒泡
				e.stopPropagation( )
			},
			//显示购物车
			showShoppingCar( ) {
				if ( this.goodsTotalNumber == 0 ) {
					return;
				}
				this.footHeight = '100%';
				this.showCar = true;
				this.carGoodsScrollTop = 0;
			},
			//隐藏购物车
			hideShoppingCar( ) {
				this.footHeight = '0';
				this.showCar = false;
			},
			kemuhah( item, index ) {
				console.log( index, '每一项' );
				this.selectedIndiceskkemu = index
			},
			//清空该门店的购物车
			clearShoppingCart( ) {
				let that = this;
				that.shoppCart = [ ];
				that.storeData.shopping_cart = [ ];
				let shoppingCartAll = uni.getStorageSync( that.shoppingCartStorageName ) || [ ];
				for ( let i in shoppingCartAll ) {
					if ( shoppingCartAll[ i ].store_id == that.storeData.store_id ) {
						shoppingCartAll.splice( i, 1 )
					}
				}
				uni.setStorageSync( that.shoppingCartStorageName, shoppingCartAll );

				for ( let i in that.goodsList ) {
					that.goodsList[ i ].number = 0;
				}
				for ( let i in that.categoryList ) {
					that.categoryList[ i ].number = 0;
				}
				//购物车商品价格合计
				that.goodsTotalPrice = 0;
				//购物车商品数量合计
				that.goodsTotalNumber = 0;
				that.hideShoppingCar( );
			},
			hrefGoodsInfo( item, index ) {
				this.goodsDetails = this.goodsList[ index ]
				this.goodsDetails.index = index
				this.getGoodsDetails( item )
			},
			// 获取商品详情介绍
			getGoodsDetails( item ) {
				var path = '/xyb/supermarket/index/editor';
				var data = {
					id: this.goodsDetails.id,
					type: 1
				};
				ikz.requestPost( path, data, res => {
					console.log( "获取商家详情介绍", res )
					if ( res.data.code ) {
						this.goodsDetails.content = res.data.data
						// this.$refs.goodsDet.open('bottom' )
						uni.navigateTo( {
							url: '/pages/Component/supermarket/Program/store/index?id=' + item.id
						} )
					} else {
						uni.showModal( {
							title: '提示',
							content: res.data.msg,
							showCancel: false,
							success: function( res ) {}
						} );
					}
				} )
			},
			touchStart( e ) {

				this.touchData.clientX = e.changedTouches[ 0 ].clientX;

				this.touchData.clientY = e.changedTouches[ 0 ].clientY;
			},
		},
	}
</script>

<style lang="scss" scoped>
	//主题颜色
	$hx-theme-color: #FFC107;
	$hx-theme-color-light: #FFEB3B;

	.ikz-top-bg {
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: -1;
	}

	.ikz-top-bg-img {
		width: 750rpx;
		height: 390rpx;
	}

	.hx-bb {
		border-bottom: 1px solid $uni-border-color;
	}

	.hx-txt-10 {
		font-size: 18rpx;
	}

	.hx-txt-12 {
		font-size: 22rpx;
	}

	.hx-txt-14 {
		font-size: 25rpx;
	}

	.hx-txt-16 {
		font-size: 29rpx;
	}

	.hx-txt-18 {
		font-size: 33rpx;
	}

	.hx-txt-22 {
		font-size: 40rpx;
	}

	.hx-color-gray {
		color: #bbbbbb;
	}

	.hx-color-white {
		color: #FFFFFF;
	}

	.hx-color-black {
		color: #333333;
	}

	.hx-color-red {
		color: #EC0000;
	}

	.hx-txt-weigth {
		font-weight: bold;
	}

	.hx-mb-10 {
		margin-bottom: 10px;
	}

	.hx-mt-15 {
		margin-top: 27rpx;
	}

	.hx-shadow {
		box-shadow: 0px 6upx 16upx rgba(173, 173, 173, 0.2);
	}

	.hx-number-box {
		position: relative;
		z-index: 10;
	}

	.title_txt {
		width: 100%;
		height: 48rpx;
		margin: 110rpx auto 0px;
		z-index: 2;
		display: flex;
		align-items: center;

		.shouhuo {
			width: 218rpx;
			// height: 48rpx;
			min-height: 38rpx;
			display: flex;
			align-items: center;
			margin-left: 30rpx;

			.shtxt {
				width: 156rpx;
				min-height: 38rpx;
				font-weight: 500;
				font-size: 26rpx;
				color: #000000;
				text-align: left;
				margin-left: 8rpx;
			}
		}

		.miantxt {
			width: 96rpx;
			height: 48rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #067CFF;
			text-align: center;
			margin-left: 70rpx;
		}
	}

	.shangbox {
		width: 750rpx;
		height: 168rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin-top: 232rpx;
		display: flex;
		padding: 24rpx 30rpx;
		box-sizing: border-box;


		.leftbox {
			width: 530rpx;
			height: 120rpx;

			.top-box {
				width: 100%;
				height: 54rpx;
				font-weight: 500;
				font-size: 36rpx;
				color: #222222;
				text-align: left;
			}

			.bombox {
				width: 100%;
				height: 36rpx;
				display: flex;
				align-items: center;

				.yuexuao {
					width: 130rpx;
					height: 36rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #000000;
					text-align: left;
					border-right: 2rpx solid #AFAFAF;
				}

				.times {
					width: 248rpx;
					height: 36rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #000000;
					text-align: left;
					margin-left: 18rpx;
				}
			}
		}
	}

	.tabs-box {
		width: 100%;
		position: sticky;
		top: 0;
		z-index: 10;
		background-color: white;
		border-bottom: 1px solid #efefef;
		height: 40px;

		.hx-tabs {
			position: relative;
			display: flex;
			height: 100%;

			.hx-tabs-item {
				width: 156rpx;
			}

			&-item {
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				width: 70px;
				color: #666666;

				text {
					font-size: 29rpx;
				}

			}

			&-active {
				color: #222222;
				// background: #FFEBDD;
				border-bottom: 2rpx solid #247EFF;
			}

			&-slider-box {
				position: absolute;
				display: flex;
				justify-content: center;
				bottom: 0;
				width: 70px;
			}

			&-slider {
				display: flex;
				background: #f6d200;
				width: 30px;
				height: 3px;
			}
		}
	}

	.main {
		position: relative;
		background-color: #ffffff;

		#mainSwiper {
			background-color: #eeeeee;
			position: sticky;
			top: calc(40px + 44px + var(--status-bar-height));

			.scroll-items {

				// 商品列表样式
				.category-list {
					width: 100%;
					background-color: #fff;
					display: flex;
					padding-bottom: 50px;

					.left,
					.right {
						background: #fff;
						position: absolute;
						top: 0;
						bottom: 0upx;
					}

					.left {
						width: 24%;
						left: 0upx;
						background-color: #f6f3f3;

						.row {
							width: 100%;
							height: 45px;
							display: flex;
							align-items: center;
							overflow: hidden;
							position: relative;

							.text {
								width: 100%;
								font-size: 25rpx;
								color: #999999;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
								text-align: center;
								padding: 0 29rpx;
							}

							&-number {
								position: absolute;
								width: 18px;
								height: 18px;
								right: 4px;
								top: 4px;
								background: #ff5722;
								border-radius: 50%;
								line-height: 18px;
								text-align: center;
								font-size: 18rpx;
								color: #ffffff;
							}

							&.active {
								height: 45px;
								background-color: #fff;

								.text {
									font-size: 25rpx;

								}
							}
						}

						.row:last-child {
							margin-bottom: 200upx;
						}
					}

					.right {
						width: 76%;
						left: 24%;

						.goodsListBox {
							padding-bottom: 100px;

							.category {
								//width: 94%;
								padding: 0 15px 10px 15px;

								.s-item {
									height: 45px;
									line-height: 45px;
									font-size: 29rpx;
									background: #ffffff;
									color: #555555;
									position: sticky;
									top: 0;
									z-index: 18;
								}

								.list:last-child {
									margin-bottom: 0;
								}

								.list {
									margin-bottom: 20px;
									width: 100%;
									display: flex;
									flex-wrap: wrap;

									.box:first-child {
										.m-store-item {
											margin-top: 0;
										}
									}

									.box {
										width: 100%;

										.m-store-item {
											display: flex;
											flex-direction: row;
											width: 100%;
											justify-content: space-between;
											margin-top: 15px;
											margin-bottom: 15px;

											.m-img {
												flex: 0 0 154rpx;
												height: 154rpx;
												border-radius: 7rpx;
											}

											.m-text {
												flex: 1;
												position: relative;
												padding: 0 11rpx;
												display: flex;
												align-content: space-between;
												flex-wrap: wrap;

												.m-title {
													font-size: 29rpx;
													color: #555555;
													font-weight: bold;
													display: -webkit-box;
													-webkit-box-orient: vertical;
													overflow: hidden;
													-webkit-line-clamp: 1;
													width: 100%;
												}

												.m-descripe {
													font-size: 22rpx;
													color: #999999;
													display: -webkit-box;
													-webkit-box-orient: vertical;
													overflow: hidden;
													-webkit-line-clamp: 2;
													width: 100%;
												}

												.m-bottom {
													display: flex;
													justify-content: space-between;
													width: 100%;
													align-items: center;
												}

												.m-price-box {
													font-weight: bold;
													display: flex;
													align-items: flex-end;
													width: 100%;

													.symbol {
														color: #ff582b;
														font-size: 22rpx;
													}

													.m-price {
														position: relative;
														top: 2px;
														font-size: 33rpx;
														color: #ff582b;
													}

													.m-old-price {
														margin-left: 3px;
														display: flex;
														flex-direction: row;
														font-size: 18rpx;
														color: #999999;
														margin-top: 5upx;
														text-decoration: line-through;
														font-weight: normal;
													}
												}

												.m-distance {
													width: 106rpx;
													position: relative;
													color: #b2b2b2;
													font-size: 20upx;
													text-align: right;

													.jumpPosition {
														position: absolute;
														bottom: 23px;
														right: 0;
														z-index: 2;
														width: 28px;
														height: 28px;
													}
												}

											}

										}
									}
								}
							}
						}
					}
				}
			}

			.evaluate-box {}

			.business-box {
				.info-lists {
					background: #ffffff;
					padding: 15px;
					display: flex;


					.leftbox {
						width: 112rpx;
						height: 40rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #666666;
						text-align: left;
						margin-right: 32rpx;
					}

					.rightbox {
						width: 546rpx;
						min-height: 40rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #222222;
						text-align: left;
					}
				}

				.info-list {
					background: #ffffff;
					padding: 15px;

					.leftbox {
						width: 112rpx;
						height: 40rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #666666;
						text-align: left;
					}

					.rightbox {
						width: 546rpx;
						min-height: 40rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #222222;
						text-align: left;
					}

					&-container {
						line-height: 36rpx;
						display: flex;
						flex-direction: row;

						[class*="hxicon-"] {
							color: #a2a2a2;
							margin-right: 8px;
						}

						text {
							font-size: 25rpx;
						}

						.right {
							float: right;
							color: #FB7A26;
							display: flex;
							flex-direction: row;
							align-items: center;

							[class*="hxicon-"] {
								color: #FB7A26;
								margin-right: 0;
								font-size: 29rpx;
							}
						}
					}

					.scroll-img {
						white-space: nowrap;
						overflow-x: auto;
						width: 100%;

						.column {
							width: 290rpx;
							height: 182rpx;
							border-radius: 9rpx;
							margin-left: 29rpx;

							&:first-child {
								margin-left: 0;
							}
						}
					}
				}
			}
		}

	}



	.foot {
		position: fixed;
		display: flex;
		z-index: 999;

		justify-content: center;
		align-items: center;
		bottom: 0;
		height: 100%;
		width: 100%;

		/*width: calc(100% - 32px);*/
		.btn-box {
			position: absolute;
			display: flex;
			bottom: 15px;
			justify-content: center;
			align-items: center;
			margin: 0;
			height: 50px;
			// background: #222222;
			background-color: #F5F5F5;
			border-radius: 100upx;
			width: calc(100% - 32px);
			z-index: 9;

			&-left {
				height: 100%;
				flex: auto;
				display: flex;
				justify-content: flex-start;
				align-self: center;
				align-items: center;
				padding-left: 17rpx;

				.cart {
					position: relative;
					width: 36px;
					height: 36px;

					image {
						width: 100%;
						height: 100%;
					}

					.tag {
						position: absolute;
						right: -11rpx;
						top: -7rpx;
						height: 18px;
						width: 18px;
						background-color: #ff4000;
						color: #ffffff;
						border-radius: 50%;
						z-index: 1;
						font-size: 18rpx;
						text-align: center;
						line-height: 18px;
					}
				}

				.priceBox {
					flex: auto;
					margin-left: 22rpx;
				}

			}

			&-right {
				width: 154rpx;
				height: 100%;
				position: relative;
				display: flex;
				justify-content: flex-start;
				align-self: center;
				align-items: center;

				.pscj {
					width: 100%;
					height: 100%;
					border-top-right-radius: 100upx;
					border-bottom-right-radius: 100upx;
					background: #222222;
					text-align: center;
					display: flex;
					justify-content: center;
					align-self: center;
					align-items: center;
				}

				.jiesuan {
					width: 100%;
					height: 100%;
					font-size: 28upx;
					border-top-right-radius: 100upx;
					border-bottom-right-radius: 100upx;
					text-align: center;
					display: flex;
					justify-content: center;
					align-self: center;
					align-items: center;
					background: #E30102;
					font-weight: bold;
					color: #fff;
				}
			}
		}

		.zz {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, .7);
			z-index: 1;
		}

		.order-box {
			display: flex;
			justify-content: flex-start;
			flex-flow: column;
			background: #F5F5F5;
			position: absolute;
			bottom: 0;
			z-index: 2;
			max-height: 66%;

			padding-bottom: 62px;
			border-top-left-radius: 16px;
			border-top-right-radius: 16px;
			overflow: hidden;
			width: 100%;


			.tab-item {
				width: 50%;
				height: 120rpx;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #020001;
				background: #FFFFFF;
				// margin-bottom: 20rpx;

				.selected {
					/* 选中时的样式，比如背景色为红色 */
					width: 100%;
					color: #020001;
					background: #ECECEC;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
				}
			}

			.dizhibox {
				width: 690rpx;
				height: 274rpx;
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin: 0 auto;
				padding: 20rpx 22rpx;
				box-sizing: border-box;

				.ikz-form-address {
					font-size: 28rpx;

					.topbbb {}
				}

				.ikz-form-address-detail {
					color: #828282;
					margin-left: 36rpx;
				}

				.qiwang {
					height: 40rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 46rpx;
				}

				
			}
			
			.shangpinbox {
				width: 690rpx;
				min-height: 290rpx;
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin: 0 auto;
				padding: 20rpx 22rpx;
				box-sizing: border-box;
			}
			


		}

		.cart-box {
			display: flex;
			justify-content: flex-start;
			flex-flow: column;
			background: #ffffff;
			position: absolute;
			bottom: 0;
			z-index: 2;
			max-height: 66%;

			padding-bottom: 62px;
			border-top-left-radius: 16px;
			border-top-right-radius: 16px;
			overflow: hidden;
			width: 100%;

			.rebate-box {
				height: 30px;
				background: #FFC107;
				color: #FF9900;
				text-align: center;
				line-height: 30px;
				font-size: 25rpx;
			}

			.box-container {
				box-sizing: border-box;
				padding: 0 16px;
			}

			.operating-box {
				font-size: 22rpx;
				line-height: 40px;
				height: 40px;
				border-bottom: 1px solid #f6f6f6;
				color: #666666;
				display: flex;
				flex-direction: row;

				&_right {
					flex: 1;
				}

				&_left {
					display: flex;
					flex-direction: row;
				}

			}

			.goods-box {
				height: 100%;
				overflow: hidden;
				flex: 1;
				display: flex;

				.goods-list-scroll {
					height: 100%;

					.goods-list {

						width: 100%;
						display: flex;
						flex-wrap: wrap;

						.box {
							width: 100%;
							border-bottom: 1px solid #f6f6f6;
							box-sizing: border-box;
							padding: 0 16px;

							.m-store-item {
								display: flex;
								flex-direction: row;
								width: 100%;
								justify-content: space-between;
								padding-top: 15px;
								padding-bottom: 15px;

								.m-img {
									flex: 0 0 160rpx;
									height: 160rpx;
									border-radius: 7rpx;
								}

								.m-text {
									flex: 1;
									position: relative;
									padding: 0 6px;
									display: flex;
									align-content: space-between;
									flex-wrap: wrap;

									.m-title {
										width: 100%;
										font-size: 29rpx;
										color: #555555;
										font-weight: bold;
										display: -webkit-box;
										-webkit-box-orient: vertical;
										overflow: hidden;
										-webkit-line-clamp: 1;
									}

									.m-descripe {
										width: 100%;
										font-size: 22rpx;
										color: #999999;
										display: -webkit-box;
										-webkit-box-orient: vertical;
										overflow: hidden;
										-webkit-line-clamp: 2;
									}

									.m-bottom {
										width: 100%;
										display: flex;
										justify-content: space-between;
										align-items: center;
									}

									.m-price-box {
										height: 24px;
										font-weight: bold;
										display: flex;
										flex-direction: row;
										align-items: flex-end;

										.symbol {
											color: #ff582b;
											font-size: 22rpx;
										}

										.m-price {
											position: relative;
											top: 2px;
											font-size: 33rpx;
											color: #ff582b;
										}

										.m-old-price {
											margin-left: 3px;
											display: flex;
											flex-direction: row;
											font-size: 18rpx;
											color: #999999;
											margin-top: 5upx;
											text-decoration: line-through;
											font-weight: normal;
										}
									}

									.m-distance {
										width: 106rpx;
										position: relative;
										color: #b2b2b2;
										font-size: 20upx;
										text-align: right;

										.jumpPosition {
											position: absolute;
											bottom: 23px;
											right: 0;
											z-index: 2;
											width: 28px;
											height: 28px;
										}
									}

								}

							}
						}
					}
				}
			}
		}
	}
</style>